He tenido y sigo teniendo problemas como nos pasa a todos los que mantenemos un blog, desde desplazarse la sidebar hasta sentir la impotencia de no ver bien el blog con Explorer.
Esta entrada es la número 100 y aprovecho para explicar como podemos saber el número de entradas que tenemos en nuestro blog.
Es muy fácil, nos situamos en el Panel y buscamos donde indica la flecha:
Letterjames (Personaliza imágenes) |
|
▼ |
Esta es una página que buscaba hace tiempo, es donde conseguí la imagen de mi perfil.
http://www.letterjames.com/start.php
En Letterjames podéis personalizar imágenes como estas:
Cooltext (Generador de Banners) |
|
▼ |
Para los que desean tener un banners y no tienen tiempo o medios para hacerlo, en la misma página también se pueden generar botones.
De lo más sencillo.
Tabblo (álbum de fotos) |
|
▼ |
Llevo tiempo queriendo postear sobre álbumes de fotografías, el abanico de posibilidades es tan extenso que no sé ni por donde empezar. Así que he pensado hacerlo con el espacio que más me ha gustado de los que he encontrado hasta ahora, algunos ya lo conoceréis es Tabblo.
Con Tabblo podéis crear álbunes con diferentes composiciones, incluir texto, añadirle tags, y subirlas desde vuestro PC, Flickr o Picasa.
También podéis hacerlo público, privado o invitar a verlo a quien deseáis vía e-mail.
Olvidaba algo...
Genera en HTML el código para insertarlo en el blog.
Para saber más sobre Tabbo regístrate y haz tu propio álbum.
Zefrank.com ( Asombrosos efectos) |
|
▼ |
Un día tuve la curiosidad de saber como funcionaba, cuantos cristalitos tendría en su interior...
A partir de ese día empecé a pensar que la imaginación supera con creces la realidad al menos la mía.
Imagechef (Personaliza imágenes) |
|
▼ |
Ideal para sorprender a un amigo con una imagen dedicada, o sencillamente para nuestro blog.
Genera el código HTML, la url, y también es posible mandar vía e-mail.
El incoveniente porque alguno debía tener es que algunas imágenes llevan impreso el nombre de la página, que por otra parte es lógico.
Parón de tres horas :( |
|
▼ |
Parece ser que el parón de Blogger no ha sido para tanto considerando que se esperaba durara el fin de semana :)
A pesar que durante tres horas algunos bloggers hicimos lo imposible por postear sin resultado la versión beta no se vio afectada,
Unos puntos más para beta.
Cavilaciones... |
|
▼ |
Para tener un blog lo primero que hace falta es ilusión, si, ilusión y algo de tiempo para dedicarle.
Todos empezamos igual. O... casi igual, con ganas de decir algo, de escribirlo o plasmarlo en unas imágenes.
Comenzamos de cero, nos guiamos por la ayuda que nos ofrecen en páginas predispuestas a ello. Visitamos foros buscando la solución a los problemas que van surgiendo, y poquito a poco nos vamos soltando.¿Nos contentamos con escribir?
Yo creo que no, sentimos necesidad de crear ese espacio acorde con nuestros gustos, buscamos la plantilla ideal aunque luego sea la que más problemas ocasione, le damos color, creamos un banner, adornitos aquí y allá.
¿Y qué? ¡Es nuestro espacio ¡
Un blog debe ser decorado al gusto de su autor, pero no hay que descuidar ciertos detalles como no recargarlo.
El uso de Scripts o música de fondo puede a veces hacer poco grata la visita.
No hay que olvidar que el visitante volverá si en nuestros escritos dejamos ver nuestra ´´esencia`` si informamos verificando previamente una noticia, si citamos al autor de la misma, y un sin fin de pequeños detalles, pero no lo olviden….
El contenido siempre es lo más importante, lo demás… es complementario.
Marca de agua |
|
▼ |
Natalia me pregunta como hago para poner la imagen de la arroba que se ve en mis categorías ;)
a mi me gusta mucho, buscaba una imagen que no resaltara demasiado para adornar esos post.
Es una marca de agua, le llaman así a las imágenes para marcar fotos o gráficos originales, una marca de copyright o un logo personal, de manera que las identifiques como tuyas.
El código que he usado es en realidad el que añadimos para poner una imagen con texto (ver aquí)
Después de varias horas peleándome con códigos y mucha paciencia conseguí hacerlo también de esta otra manera.
El código es el siguiente:
<div style="background-image: url(aquílaurldelaimagen); background-repeat: no-repeat;">
Resultado:
Tambien puedo escribir
sobre ella.
Para ello incluimos el
código con la imagen.
Después nos situamos
en Redactar, y ponemos
el cursor donde deseamos
escribir:
Este es el resultado.
Eso es todo ¡Suerte¡
Imagen de fondo |
|
▼ |
Para poner una imagen de fondo en el blog busca en tu plantilla donde dice más o menos esto:
body { background:#fff margin:0; padding:40px 20px;
Donde dice background:#fff añades lo siguiente: url(tuimagendefondo);
Quedaría asi:
body { background:#fff url(tuimagendefondo); margin:0; padding:40px 20px;
¡Suerte ¡
Sidebar o columna desplazada |
|
▼ |
A todos nos ha pasado, nos hace peder el tiempo buscando el motivo o error.
Los que tenemos el blog más tiempo sabemos donde remover, pero aún así nos angustia ver nuestra columna lateral desplazada.
Suele ocurrir cuando agregamos algún accesorio nuevo, adornitos que a simple vista son de pequeño tamaño suelen llevar un código demasiado largo, ocupando más espacio del que tiene nuestra columna.
También puede pasar en un post, el main o espacio donde van los post tiene aproximadamente width=400px) una imagen demasiado ancha lo desplazaría.
No hay que angustiarse, vasta con mirar los cambios que se hicieron antes de tan temible caos.
Si es necesario guardaremos en borrador de uno en uno los post publicados, iremos visualizando en vista previa hasta dar con el que ocasiona el problema.
También depende del navegador que usemos, normalmente a mi me proporciona problemas Explorer, no me preguntéis el motivo, supongo que porque Explorer no es un navegador predeterminado para páginas Web.
Gickr (Nuestras imágenes en gif) |
|
▼ |
Ya podemos darle vida a nuestras imágenes. En Gickr podemos subir imágenes desde nuestro ordenador o importándolas desde flickr y nos convierte imágenes estáticas en gif.
Para poder insertarlo en nuestro blog nos proporciona la URL de la imagen o el código HTML, también podemos escoger velocidad y tamaño.
Sin pérdida de tiempo en registros (eso suele verse poco)
Aquí una muestra:
Vía: ñblog
Ejemplos útiles |
|
▼ |
Insertar una línea: |
<hr>
- Resultado:
Enlazar un texto: |
- Resultado: Mi página
Letra en Bold (negrita) |
<b>Letra en Bold (negrita)</b>
- Resultado: Letra en Bold (negrita)
Agregar una imagen: |
<img src="url-de-la-imagen">
- Resultado:
Crear una tabla: |
<table border=1><td>Aqui el contenido de la tabla, enlaces, imágenes, texto, ...</td></table>
- Resultado:
Aquí el contenido de la tabla, enlaces, imágenes, texto, ... |
Código para nuestro correo: |
<a href="mailto:forever@gmail.com">E-mail</a>
- Resultado: E-mail
También podemos añadirle una imagen: |
<a href="mailto:aquí tu direccion de correo" target="_blank" title="aquí texto informativo"><img src="aquí la url de la imagen"></a>
- Resultado:
Señalar una línea de texto con color: |
<table bgcolor="#996699"><tbody><tr><td>Señalar una línea de texto con color:</td></tr></tbody></table>
- Ejemplo:
Señalar una línea de texto con color: |
Enmarcar un texto |
<legend> ... aquí va el texto... </legend>
- Ejemplo:
Lista no numerada |
<ul>
<li>cuchara
<li>tenedor
<li>cuchillo
</ul>
Ejemplo:
- cuchara
- tenedor
- cuchillo
Texto parpadeante: |
<blink>Texto parpadeante</blink>
Otro día más... ;)
Leer más (Read More) para plantillas clásicas y del nuevo Blogger |
|
▼ |
Aprovechando que Christian tiene interés por el código de ´´Leer más`` este post va para él y todos los que desean saber como aplicarlo.
Es lógico que un post demasiado largo nos desespere y haga aburrida la visita al blog.
Para que un texto demasiado extenso salga más corto y muestre un enlace que diga´´Leer más ``o cualquier otra de frase de nuestra cosecha haremos lo siguiente:
Si nuestra plantilla es clásica añadiremos el siguiente código justo antes de </style>
Si utilizas el nuevo Blogger (ya no tan nuevo) debes añadirlo justo antes de: ]]></b:skin>
Este es el código:
.posthidden {display:none}
.postshown {display:inline}
Después incluimos antes de <head> lo siguiente:
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
Guardamos y publicamos.
Luego justamente antes del texto que no se quiere mostrar, añadiremos :
<span class="posthidden" id="El título del post">Este es el cuerpo del post. Aquí quedará todo el texto que deseamos aparezca al hacer click sobre el link de ´´Leer más``. Es el texto que no se ve a primera vista.</span>
Debes escribir el título del post en id="El título del post"
No olvidemos que al final del post debe cerrar con </span>
Por último... justo después de </span> incluiremos el link que al hacer click sobre él mostrará la parte oculta del post, así:
<a href="javascript:expandcollapse('El título del post')">[+/-] Seguir Leyendo...</a>
(He dejado en color rojo el texto para copiar, en color verde el que debemos sustituir por el título de nuestro post y en azul es el texto que escribiremos y deseamos salga en el expandible)
Guardamos los cambios y publicamos.
No hay que olvidar poner en el código del link el mismo título del post.
Vía: Daleclick
Hay una forma de no tener que aplicar este código cada vez que escribimos una entrada, es más cómodo y ahorra tiempo, basta con añadir el código para las entradas en la plantilla de entrada, la encontraréis en este orden:
Opciones/Formato/Plantilla de entrada
Eso hace que quede ´´grabado`` el código y salga en todas las entradas, pero con la posibilidad de escoger a que entradas le añadimos ´´el leer más`` o la imagen.
De no desear aplicarlo lo eliminamos y listo.
Textarea |
|
▼ |
Me pregunta Ale la forma de hacer un textarea es decir esa ventanita que a veces aplico con un código o texto en su interior.
Suele usarse por la comodidad de copiar un código o texto demasiado extenso.
El código del textarea es : <textarea> aquí el texto </textarea>
Hasta ahí todo bien, pero ocurre algo, cuando añadimos un textarea en un post resulta que nos sale con los saltos de línea, es decir con cada salto de línea nos sale el código de ese salto que es <br>
Si nos situamos en nuestro blog en Opciones/Formato veremos que hay una opción para quitar o añadir saltos de línea:
Si esa opción NO la activamos nuestro textarea saldrá sin saltos de línea, sin código <br> dentro del textarea. Pero OJO… si deseamos saltos de línea en nuestros post tendremos que añadirlos nosotros manualmente, cada salto un a más saltos más <br>
Yo tengo los saltos de línea activados, me resulta mucho más cómodo a la hora de postear porque con un click del teclado el salto de línea es instantáneo, no hay que ir añadiendo el código <br> cada dos por tres.
Lo que si hago es tanto si escribo el código completo del textarea o lo hago con la opción de copiar y pegar escribirlo en ´´Edición HTML`` (de nuestro blog) y darle salida sin ver el efecto en ´´Editar`` eso implicaría que automáticamente salgan los saltos de línea, (<br> en nuestro textarea)
Una vez explicado esto y para saber como modificar un textarea a nuestra necesidad lo ideal es empezar diciendo que:
cols es el tamaño del ancho de una columna y rows el número de filas o líneas.
Textarea para que se seleccione todo el código:
El evento onclick es el que hace que con un click se selecione todo el textarea.
- Ejemplo:
- Resultado:
------------------------------------------------------------------------------------------------
Textarea con cursor y background:
Wrap=off es para que aparezca el cursor y background para el color.
Si deseamos el background de otro color sustituimos #40BF73; por el color escogido o suprimimos el código de background si no lo deseamos.
- Ejemplo:
- Resultado:
------------------------------------------------------------------------------------------------
Por último utilizaremos el textarea para incluir un código HTML.
Para ello recomiendo un convertidor de códigos, en esta página tienen uno http://chuano.net/
Una vez covertido el código deben suprimir todos estos signos \ como pueden comprobar van en sentido contrario a los del código HTML.
¿Y todo esto para qué?
Para que a la hora de dar salida al post no, nos muestre errores.
- Ejemplo:
- Resultado:
¡Suerte¡
En casa de herrero... |
|
▼ |
Es un dicho... ´´En casa de herrero cuchara de palo`` quiere eso decir que arreglas lo ajeno pero lo propio sigue pendiente...
He tenido que ir bajando post y dejándolos en borrador por si era algún código demasiado largo, y no, no es eso.
He mirado en Opciones, y en todos los rincones donde he ido tocando últimamente sin resultado.
He instalado de nuevo Firefox ¿que tiene que ver eso con el blog? porque pensaba que si con Explorer no tenía el mismo problema supuse que era por el navegador, pero mi entrañable Firefox no podía jugarme una mala pasada así que tampoco es eso.
El problema es que cuando estoy como ahora escribiendo y clico en la pestaña de ´´Ver blog`` se abre la ventana más blanca que jamás haya visto, y un tajante y estúpido texto que dice ´´terminado`` me indica de forma clara que como no sale la URL no hay página que ver.
No sé si me explico, no me redirecciona a la página principal del blog la pestaña para ese menester.
Y el logo... tantas veces que repito el código para que el logo actualice la página y resulta que va el mío y se niega a funcionar, y es el mismo código, eso es lo más extraordinario, que no he modificado nada y ha dejado de funcionar :(
Por lo demás todo bien ¿les parece poco? grrrr cosas así me superan no puedo remediarlo, aunque puedo seguir posteando tengo que dar con la solución.
¿Hay algún doctor en la sala? ¿Alguien tuvo los mismos síntomas?
Y la pregunta del millón... ¿Como lo solucionó?
Seguramente será algo que tengo delante de mis ojos, algo que no consigo ver, a lo mejor mañana tengo las ideas más claras, o eso espero...
Alineación de texto |
|
▼ |
Aprovechando que Mahaya quiere modificar el título de su blog he pensado hacer este mini tutorial que nos puede venir muy bien para saber como alinear un texto.
En un post tenemos la herramienta de Blogger para hacerlo .
¿Qué ocurre si deseamos hacerlo en la plantilla? ¿Qué código HTML utilizo?
align=left para alinear a la izquierda
align=right para alinear a la derecha
align=center para centrar el texto
<center> texto</center>
Ericdeis (Dibuja en tiempo real) |
|
▼ |
No es que sea un enlace para recordar pero ahí estaba, en algún lugar de Internet.
Seguro que alguien pica y dibuja.
Logo aleatorio |
|
▼ |
No sé si es acertado decir ´´cambiante`` pero lo cierto es que cambia.
Cambia la imagen del logo o banner del blog con este código:
<left> <script language="JavaScript">
<!--
/*
Random Image Link Script
By Website Abstraction (http://www.wsabstract.com)
and Java-scripts.net (http://www.java-scripts.net)
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="http://tuimagen.jpg"
myimages[2]="http://tuimagen.jpg"
myimages[3]="http://tuimagen.jpg"
myimages[4]="http://tuimagen jpg"
//specify corresponding links below
var ry=Math.floor(Math.random()*(myimages.length-1))+1
document.write(\\\'<img src="\\\'+myimages[ry]+\\\'"></a>\\\')
}
random_imglink()
//-->
</script></left>
Nos situaremos en la plantilla en <!-- Blog Header -->
Y justo después de <div id="blog-header"> pegaremos el código, o en su defecto donde deseamos aparezca el logo.
Por último donde dice: http://tuimagen jpg pondremos la URL de nuestra imagen tantas veces como imágenes deseamos poner.
Cada vez que entremos a la página veremos el logo con una imagen diferente ;)
Código de enlaces expandible |
|
▼ |
Para ganar espacio y dar una imagen más ordenada de los enlaces lo mejor es un despegable, puse el código de manera que se pueda copiar, y una vez ubicados en vuestra plantilla podéis pegarlo modificando las direcciones y el título del despegable.
<option selected>De utilidad</option>
<option value="http://www.google.es/"> Google </option>
<option value="http://www.imageshack.us/">ImageShack®</option>
</select>
<option value="aquí la url de la página">aquí el texto visible</option>
País visitante (Bandera) |
|
▼ |
Este código es para saber los países que nos visitan en tiempo real, el resultado es la bandera de cada país, un poco grande para mi gusto pero ahí estará en la sidebar durante unos días para que veáis el efecto :)
Colocar en la plantilla en el lugar que deseas aparezca
<script language="Javascript" src="http://map.geoup.com/geoup?template=flag"></script>
Herramienta de Gmail |
|
▼ |
¿Ya tienen cuenta GMail? ¿A que esperan?
Para pasar de Blogger a Blogger Beta es necesario tener una cuenta.
(Clicar en Download Gmail Notifier for Windows)
Generador de iconos
Ojo donde hacemos click |
|
▼ |
El cambio de Blogger de toda la vida a Blogger BETA está a la orden del día, yo pienso esperar (por ahora) a que Blogger tenga en consideración el castellano.
Desde hace unos días que, cuando guardamos los cambios de un post y le damos salida vemos un texto como ese que he rodeado de color rojo.
Es una invitación para migrar a BETA, y aunque todos coinciden que supera con creces el anterior, sigue en prueba.
Traducido dice algo así:
¡Ahora, usted puede hacer aún más con su blog!
Añada etiquetas postales, estableza mandos de intimidad, y disfrute del instante publicando con la nueva versión de Blogger en la beta.
Cambie su blog todayl
Ya lo sabéis, si queréis migrar sin comerlo ni beberlo... Solo debes clicar donde dice: Switch your blog today
Ecoestadística (Tutorial estadísticas) |
|
▼ |
¿Algún problema? ¿Lo ves complicado? Si algo no te resulta házmelo saber.
Postit |
|
▼ |
Para algunos es un estorbo, para otros es de gran utilidad, los hay de colores y si sigo así esto parece un acertijo, me refiero a los postit.
En esta página de webnote podéis conseguir un tablero o mural para postit.
Después clicamos en load:
Para ubicarlo en nuestro blog copiaremos la URL de la barra de direcciones y nos la llevamos para situarnos en nuestra plantilla.
Una vez allí, buscamos donde deseamos sea visible el enlace y de esta forma hacer saber que hay un lugar disponible para dejar mensajes.
Pondremos el código de imágenes con enlace, es decir:
<a href="aquílaURLdemiwebnote/">
<img src="http://img240.imageshack.us/img240/3006/postitid2lv2.gif" /></a>
El resultado debería verse así: Deberéis cambiar la dirección URL que hace de enlace aunque, la de la imagen puede ser válida.
El tablero que se nos presenta viene sin notitas (obvio) ¿Como haces para dejar un postit?
Clica en el postit chiquitito y amarillo de la izquierda, luego clica dos veces para escribir.
Escribe tu mensaje, pon el color que quieras, luego guárdalo en el diskette (junto al postit donde clicaste)
Si utilizas una plantilla clásica debes buscar en la plantilla y situarte en el lugar justo que deseas aparezca, puedes guiarte por los enlaces, el archivo del blog ect...
Si tu plantilla es del nuevo Blogger puedes agregar este código en:
Plantilla/Añadir un elemento de página/HTML Javascript
No olvides sustituir donde dice aquílaURLdemiwebnote por la url de tu webnote;)
¡ Ya tenemos postit ¡ Otro día lo haremos con un tagboar (un mini chat)
Logo54 (Generador de logos-banners) |
|
▼ |
Más sobre generadores de logos.
Aquí encontrarás con el tipo de letra de Ferrari, STAR W, Harry Potter, Monsters, Yahoo, y Nintendo
10 Tablas de colores donde escoger |
|
▼ |
Con Blogger BETA ya nadie tiene problemas a la hora de dar color a su blog, la tabla de colores que proporciona es muy sencilla.
Si son indecisos lo tienen muy mal, porque el abanico de posibilidades que se pueden encontrar en Internet es extensísimo.
alemama habla con mucho entusiasmo sobre una tabla en particular, y no me extraña, porque es una de las que más me ha gustado, si entráis a la página comprobaréis que, pasando el mouse por encima se puede ver el efecto antes de tomar una decisión.
Si tenéis alguna página sobre colores que os ha llamado la atención podéis dejar el enlace y lo incluiremos en este post.